<template>
	<view class="layer uni-tab-bar" >
		<IndexHead :config="navConfig"/>
		
		<!-- 选项卡头部 -->
				<view class="glmoreTabBox">
					<view class="glmoreTab">
						<block>
							<view
								v-for="(tab,index) in tabBars"
								:key="tab.id"
								:class="tabIndex==index ? 'active' : ''"
								@click="tapTab(index)">
								{{tab.name}}
							</view>
						</block>
					</view>
				</view>
		
		<view class="today"><text>今天</text></view>
		
		<view class="hotel-list">
			<view class="hotel-item" v-for="(item,index) in hotelData" :key='index'>
				<image :src="item.img"></image>
				<view class="item-right">
					<view class="item-title" >
						<text class="title-text">{{item.name}}</text>
						<view class="stars">
							<ul>
								<li v-for="index of item.level" :key="index"></li>
							</ul>
						</view>
						<text class="sc">收藏</text>
					</view>
					<text class="far">据您{{item.far}}公里</text>
					<text class="address">{{item.add}}</text>
					<text class="price">￥{{item.prize}}</text>
				</view>
			</view>
		</view>
		
		<view class="yesday"><text>昨天</text></view>
		
		<view class="hotel-list">
			<view class="hotel-item" v-for="(item,index) in hotelDate" :key='index'>
				<image :src="item.img"></image>
				<view class="item-right">
					<view class="item-title" >
						<text class="title-text">{{item.name}}</text>
						<view class="stars">
							<ul>
								<li v-for="index of item.level" :key="index"></li>
							</ul>
						</view>
						<text class="sc">收藏</text>
					</view>
					<text class="far">据您{{item.far}}公里</text>
					<text class="address">{{item.add}}</text>
					<text class="price">￥{{item.prize}}</text>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import IndexHead from '../../../components/indexHead.vue'
	import FootMenu from '../../../components/footMenu.vue'
	import ShouyeOrder from '../../../components/shoyeOrder.vue'
	import HotelQuery from '../../../components/hotelQuery.vue'
	export default{
		data(){
			return{
				navConfig:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch:false,
						hasMenu:false,
						hasTitle:true,
						minHead:true,
					},
					left: {
						img:'',
						text:'',
					},
					mid:{
						title:'我的足迹',
						hasSearchMid:false
					},
					right:{
						
					}
				},
				curTabIndex: 0,
								tabIndex: 0 ,//默认选中第一个tab
								tabBars:[
									{name:'全部'},
									{name:'景区'},
									{name:'宾馆'},
									{name:'美食'},
									{name:'娱乐'},
									{name:'商品'}
								],
								
				pageConif:{
					hasSearch:false,
					hasMenu:false,
					hasTitle:false,
					left_img:'../static/pos-home.png',
					left_text:'沈阳',
					pageId:1 
				},
				hotelData:[
					{
						name:'龙芯昂国际酒店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:4
					},
					{
						name:'糖果奶茶店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:3
					},
					{
						name:'万畅轰趴馆',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:0
					},
					{
						name:'龙芯昂国际酒店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:4
					},
					{
						name:'糖果奶茶店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:3
					},
					{
						name:'万畅轰趴馆',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:0
					},
					{
						name:'龙芯昂国际酒店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:4
					},
					{
						name:'糖果奶茶店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:3
					},
					{
						name:'万畅轰趴馆',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:0
					},
					
				],
				hotelDate:[
					{
						name:'龙芯昂国际酒店',
						far:5,
						add:'浑南区物理地铁后',
						prize:298,
						img:'../../../static/myPic/binguan.png',
						level:4
					},
				],
				
			}
		},
		components:{
			IndexHead,
			ShouyeOrder,
			FootMenu,
			HotelQuery
		},
		methods:{
					tapTab(index){
						this.tabIndex = index;
						
					}
				}
	}
</script>
	
<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 1334upx;
		background-color: #fff;
	}
	.bgc{
		position: relative;
		width: 750upx;
		height: 180upx;
		background-image: linear-gradient(to bottom, #5875FD,#54ADFF, #fff);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#54ADFF', endColorstr='#fff', GradientType=1); 	
	}
	
	.headIcon{
		position: absolute;
		margin-top: 64upx;
	}
	
	.headIcon text{
		width: 20upx;
		height: 36upx;
		margin-left: 29upx;
		color: #fff;
		font-size:32upx;
		margin-top: 61upx;
	}
	.headIcon i{
		width: 126upx;
		height: 31upx;
		margin-left: 22upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #fff;
		
	}
	
	.today{
		width: 750upx;
		height: 80upx;
		background: #F6F6F6;
	}
	.today text{
		width: 60upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #999999;
		padding: 35upx 0 0 40upx;
	}
	
	.yesday{
		width: 750upx;
		height: 80upx;
		background: #F6F6F6;
		margin-top: 35upx;
	}
	.yesday text{
		width: 60upx;
		height: 28upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #999999;
		padding: 35upx 0 0 40upx;
	}
	
	.hotel-list{
		width: 710upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20upx;
	}
	.hotel-item{
		width: 710upx;
		height: 182upx;
		margin-top: 25upx;
	}
	.hotel-item image{
		margin: 10upx  10upx 0upx 10upx;
		width: 239upx;
		height: 172upx;
		float: left;
		border-radius: 10upx;
	}
	.item-right{
		width: 430upx;
		height: 182upx;
		float: right;
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
	}
	.title-text{
		font-size: 32upx;
		float: left;
	}
	.stars{
		float: left;
	}
	.sc{
		float: right;
		font-size: 21upx;
		padding-top: 10upx;
		color: #666666;
	}
	.far{
		width: 100%;
		display: block;
		font-size: 25upx;
		color: #666666;
	}
	.address{
		width: 100%;
		display: block;
		margin-top: 5upx;
		font-size: 25upx;
		color: #666666;
	}
	.price{
		font-size: 32upx;
		color: #0075EE;
		margin-top: 15upx;
		float: left;
	}
	.buy{
		width: 127upx;
		height: 40upx;
		margin-top: 15upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		line-height: 40upx;
		border-radius: 20upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.stars ul{
		float: right;
		padding: 0;
		display: flex;
		flex-direction: row;
		list-style:none;
	}
	.stars ul li{
		width: 25upx;
		height: 25upx;
		margin-top: 10upx;
		background:url(../../../static/dengji.png) no-repeat center;
		background-size: 80%;
	}
	
	.glmoreTabBox{
			position: relative;
			margin-top: 60upx;
		}
		.glmoreTab{
			width:100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top:-82upx;
			margin-bottom: 40upx;
			
		}
		.glmoreTab > view{
			flex: 1;
			text-align: center;
			font-size: 24upx;
			color: #0075EE;
			line-height: 54upx;
			position: relative;
		}
		/* .glmoreTab > view:nth-child(2):after{
			content:"";
			display: inline-block;
			margin-left:10upx;
			margin-bottom: -6upx;
			border:10upx solid transparent;
			border-top-color: #55A0FF !important;
		} */
		.glmoreTab .active{
			font-weight: bold;
		}
		.glmoreTab .active:before{
			content:"";
			width:130upx;
			height: 3upx;
			background:linear-gradient(left,#8EC6FF,#6592F7);
			display:block;
			margin: auto;
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -66upx;
		}
</style>
